<script setup lang="ts">
/* eslint-disable prettier/prettier */
import { ref, computed } from "vue";
import { useDark, useECharts } from "@pureadmin/utils";
import { clusterData, clusterCenters, labels, barDataOption } from "./data";
import type { IBarData } from './data';
import Bar from "./charts/bar.vue";

// 兼容dark主题
const { isDark } = useDark();
let theme = computed(() => {
  return isDark.value ? "dark" : "default";
});

// 初始化ECharts
const chartRef = ref();
const { setOptions } = useECharts(chartRef, { theme });

// 根据配置项渲染ECharts
const data = clusterData;

// 每个聚类的颜色
const clusterColors = ["#37A2DA", "#e06343", "#37a354", "#b55dba"];

// 将聚类结果附加到数据点，设置颜色
const clusteredData = data.map((point, index) => ({
  value: point,
  itemStyle: {
    color: clusterColors[labels[index]] // 使用不同颜色
  }
}));

setOptions({
  tooltip: {},
  xAxis: {},
  yAxis: {},
  series: [
    {
      symbolSize: 10,
      data: clusteredData,
      type: "scatter"
    },
    {
      symbolSize: 15,
      data: clusterCenters,
      type: "scatter",
      itemStyle: {
        color: '"black"'
      },
      markPoint: {
        symbol: "rect",
        symbolSize: 15,
        itemStyle: {
          color: "black"
        },
        data: clusterCenters.map((center, index) => ({
          name: `Cluster Center ${index + 1}`,
          coord: center
        }))
      }
    }
  ]
});

const value = ref(0);
let barData = ref<IBarData>();
barData.value = barDataOption[0];
console.log(barData.value);

const options = [
  {
    value: 0,
    label: "性别占比"
  },
  {
    value: 1,
    label: "年限"
  },
  {
    value: 2,
    label: "收入"
  },
  {
    value: 3,
    label: "总资产"
  }
];

const handleChange = () => {
  barData.value = barDataOption[value.value];
};
</script>

<template>
  <div>
    <el-card shadow="never" class="mb-2">
      <template #header>
        <div class="card-header">
          <h1>聚类结果</h1>
        </div>
      </template>
      <div ref="chartRef" style="width: 100%; height: 50vh" />
    </el-card>
    <el-card shadow="never" class="mb-2">
      <template #header>
        <div class="card-header">
          <el-select
            v-model="value"
            placeholder="Select"
            style="width: 240px"
            @change="handleChange()"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </template>
      <Bar :barData="barData" />
    </el-card>
  </div>
</template>
